﻿<script type="text/javascript">
var ultimo_time = "{{ ultimo_time }}";
var d1 = [];
// a null signifies separate line segments
var d1 = [{% for row in response %}[{{ row.0 }},{{ row.1 }}],{% endfor %}[0,0]];
if (d1[(d1.length-1)][0]==0){
	d1.pop();
	//alert('popei');
}
var options = {
	lines: { show: true },
	points: { show: false },
	color: "rgb(100, 100, 255)",
	shadowSize: 0,
	xaxis: { mode: "time" }
};
function ajaxGraph(){
		$.ajax({
		   contentType: 'application/json',
		   type: "GET",
		   url: "/graph_ajax_json/{{ ativo_cod }}/"+ultimo_time+"/",
		   dataType: 'json',
		   success: function(resp) {
						var item = resp;
						if(item=="UN"){
							//alert("UN");
						}else{
							var new_arr = item;
							d1.push([new_arr[0][0],new_arr[0][1]]); //volta d1 para ultimo
							$.plot($("#placeholder"), [ d1 ], options);
							
							ultimo_time = new_arr[0][0]; //seta o time para o ultimo
							//alert("new_arr: " + new_arr);
							//alert("ultimo_time: " + ultimo_time);
							//alert("d1: " + d1);
						}
						return;	
					},
			error: function() {
				// Prompt for user data and process the result using a callback:
				//alert('Falha de conexao com o servidor.');
				$("#erro_dialog").dialog({ resizable: false });
			},
        });
 }	

 setInterval('ajaxGraph();', 15000);
</script> 
<div class="main-content">
	<!-- Pagetitle -->
	<h1 class="pagetitle">Gráfico Ativo {{ ativo_cod }}:</h1><br/>
	<h3>Insira o código do ativo que quer consultar o gráfico. O gráfico é <span style="color:Red;">atualizado em tempo real</span> sem necessidade de dar refresh na página.</h3>

<div class="contactform"> 
<form action="" method="post" id="graphForm" name="graphForm"> 
<fieldset>
<legend>&nbsp;Buscar Ativo:&nbsp;</legend>
  <div class="fieldWrapper"> 
            <p>
              <label class="left" for="ativo_cod"><span class="obrigatorio">*Código Ativo</span></label> 
            <input id="id_ativo_cod" type="text" class="field" name="ativo_cod" maxlength="4" /> 
            </p> 
        </div> 
</fieldset>
<p><input class="button" id="btn_ativo" type="button" value="Buscar >>" /></p>
</form>
</div>
</br>	

	<div id="placeholder" style="width:470px;height:300px;left:0px;display:inline; /*Fix IE floating margin bug*/; float:left; margin:0 0 0 -23px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;"></div> 

	<script id="source" language="javascript" type="text/javascript"> 
	$(function () {
		$.plot($("#placeholder"), [ d1 ], options);
	});
	</script> 

</div>